<template>
  <div class="flex flex-col h-full bg-gray-100 dark:bg-gray-900">
    <!-- 用户信息卡片 (已登录) -->
    <div v-if="userStore.isLoggedIn" class="flex flex-col items-center p-6 md:p-8 bg-white dark:bg-gray-800 shadow-sm">
      <img :src="userStore.avatar || defaultAvatar" alt="avatar" class="w-24 h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg mb-4">
      <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">{{ userStore.nickname }}</h2>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">@{{ userStore.profile?.username }}</p>
    </div>

    <!-- 登录提示卡片 (未登录) -->
    <div v-else class="flex flex-col items-center p-8 md:p-12 bg-white dark:bg-gray-800 shadow-sm">
      <img :src="defaultAvatar" alt="avatar" class="w-24 h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg mb-4 opacity-50">
      <p class="text-gray-600 dark:text-gray-300 mb-4">登录后解锁更多精彩内容</p>
      <button @click="goToLogin" class="px-8 py-3 bg-emerald-600 text-white font-semibold rounded-lg shadow-md hover:bg-emerald-700 transition-colors">
        登录 / 注册
      </button>
    </div>

    <!-- 功能列表 -->
    <div class="flex-grow mt-4 space-y-2 p-2 md:p-4">
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm">
        <ul class="divide-y divide-gray-200 dark:divide-gray-700">
          <li v-for="item in menuItems" :key="item.title" @click="handleMenuItemClick(item)" class="flex items-center justify-between p-4 cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors">
            <div class="flex items-center">
              <component :is="item.icon" class="w-6 h-6 mr-4 text-emerald-500" />
              <span class="text-gray-800 dark:text-gray-200">{{ item.title }}</span>
            </div>
            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
          </li>
        </ul>
      </div>

      <!-- 退出登录按钮 (仅在登录后显示) -->
      <div v-if="userStore.isLoggedIn" class="p-2 md:p-4">
          <button @click="handleLogout" class="w-full text-center p-3 bg-white dark:bg-gray-800 text-red-500 dark:text-red-400 font-semibold rounded-lg shadow-sm hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors">
            退出登录
          </button>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: 'Me'
}
</script>
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { shallowRef } from 'vue'
import { useModal } from "@/hooks/useModal";
import UserCircleIcon from '@/components/icon/UserCircleIcon.vue'
import Cog6ToothIcon from '@/components/icon/Cog6ToothIcon.vue'

const modal = useModal();
const router = useRouter()
const userStore = useUserStore()

// 使用一个在线服务生成默认头像，避免本地图片路径问题
const defaultAvatar = 'https://api.dicebear.com/8.x/initials/svg?seed=Guest'

interface MenuItem {
  title: string;
  icon: any;
  action: () => void;
}

const menuItems = shallowRef<MenuItem[]>([
  { title: '编辑资料', icon: UserCircleIcon, action: () => router.push('/profile/edit') },
  { title: '账户设置', icon: Cog6ToothIcon, action: () => router.push('/account/settings') },
  // ...可以添加更多菜单项
])

const handleMenuItemClick = (item: MenuItem) => {
  // 检查是否登录，如果未登录，则跳转到登录页
  if (!userStore.isLoggedIn) {
    router.push('/login')
    return
  }
  // 执行菜单项对应的操作
  item.action()
  // 也可以简单地用 alert 提示
  // alert(`即将跳转到 ${item.title}`)
}

const goToLogin = () => {
  router.push('/login')
}

const handleLogout = async () => {
  try {
		await modal.confirm(
			{
				title: "确认退出",
				message: "你确定要退出登录吗？",

			},
			{
				position: "center",
				animationType: "slide-up",
				closeOnClickOverlay: false,
			}
		);
    userStore.logout()
	} catch (error) {
		console.log("用户取消了删除操作。", error);
	}

}
</script>

<!-- <template>
  <div class="flex  flex-row justify-between items-center px-4 pt-4">
    <div>我的</div>
    <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700" @click="goto">
      <SettingIcon />
    </button>
    
  </div>
</template>

<script lang="ts">
export default {
  name: 'Me'
}
</script>
<script setup lang="ts">
import { onActivated, onDeactivated } from 'vue';
import { useRouter } from 'vue-router';

import SettingIcon from '@/components/icon/SettingIcon.vue';


const router = useRouter();

const goto = () => {
  router.push('/settings')
}

onActivated(() => {
  console.log('Me component activated')
})

onDeactivated(() => {
  console.log('Me component deactivated')
})
</script>

<style scoped>

</style> -->